<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登录 - 后台管理</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./plugins/elementui/index.css">
    <style>
        .container {
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to top, #7f7fd5, #86a8e7, #91eae4);
            background-size: cover;
        }

        .login-box {
            width: 350px;
            padding: 50px 30px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .1);
            background-color: rgba(255, 255, 255, .5);
        }

        .login-header {
            font-weight: bold;
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
            color: #1450aa
        }

        .login-form {
            display: flex;
            flex-direction: column;
        }

        .login-form > :nth-child(-n+3) {
            margin-bottom: 10px
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <div class="login-box">
        <div class="login-header">
            欢迎登录
        </div>
        <div class="login-form">
            <el-input placeholder="请输入用户名" v-model="loginParam.username"></el-input>
            <el-input type="password" placeholder="请输入密码" v-model="loginParam.password"></el-input>
<!--            <el-checkbox v-model="loginParam.remember">记住我</el-checkbox>-->
            <el-button type="primary" @click="handleLogin">登录</el-button>
        </div>
    </div>

</div>
</body>

<script src="plugins/vue/vue.js"></script>
<script src="./plugins/elementui/index.js"></script>
<script src="plugins/axios/axios-0.18.0.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      loginParam: {
        username: 'admin',
        password: 'admin',
        remember: false
      }

    },
    methods: {
      handleLogin() {
        axios.post("/api/login", this.loginParam).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.message || '登录成功',
              type: 'success',
              duration: 500,
            });
            window.location.href = 'pages/main.html';
          } else {
            this.$message.error(res.data.message || '登录失败');
          }
        });
      },
    }
  });
</script>
</html>